<script setup>
	import Header from '@/components/Header.vue'
	import Back from '@/components/Back.vue'
	import PickerSelect from '@/components/PickerSelect.vue'
	import useBLE from '@/hooks/useBLE.js'
	import { showToast } from '@/utils/toast.js'
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
	import { devPhotonAddApi } from '@/api/user.js'
	import { ref, onUnmounted } from 'vue'

	const {
		deviceId,
		deviceIdList,
		isConnected,
		initBluetooth,
		connectDevice,
		disconnectDevice,
		searchDevices,
		searchCount
	} =
	useBLE(devPhotonAddApi)
	let deviceName = ''

	onLoad(() => {
		initBluetooth()
	})

	onPullDownRefresh(() => {
		initBluetooth()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 500)
	})

	onUnmounted(() => {
		if (isConnected.value) disconnectDevice()
	})

	function connectBLE() {
		setTimeout(() => {
			connectDevice(deviceName)
		}, 500)
	}

	function scanCode() {
		uni.scanCode({
			scanType: ["qrCode"],
			success: (res) => {
				if (res.result) {
					const val = res.result
					const findObj = deviceIdList.value.find(item => {
						return item.name === val.toLocaleUpperCase()
					})
					// console.log('findObj', findObj)
					if (findObj) {
						deviceId.value = findObj.deviceId
						deviceName = findObj.name
						setTimeout(() => {
							connectDevice(deviceName)
						}, 500)
					} else {
						showToast('未找到蓝牙设备，请查看是否开启设备或下拉刷新', 2000)
					}
				} else {
					console.log('请重新扫描')
					return false
				}
			},
			fail: (res) => {
				console.log('未识别到二维码')
			}
		})
	}

	function useRecords() {
		uni.navigateTo({
			url: '/pages/useRecord/index'
		})
	}
	
	function findDevice() {
		initBluetooth()
	}

	function handleConfirm({ selectedItems }) {
		deviceName = selectedItems.name
	}
</script>

<template>
	<view class="container">
		<Header style="width: 100%;" />
		<image src="/static/images/bg.png" class="bg"></image>
		<view class="content">
			<wd-picker :columns="deviceIdList" label-key="name" value-key="deviceId" label="选择蓝牙设备" :disabled="isConnected || deviceIdList.length === 0"
				v-model="deviceId" @confirm="handleConfirm" />
			<view class="select-border"></view>
			<view class="button">
				<image class="btn-image" mode="widthFix" src="/static/images/connect-ble.png" v-if="!deviceId || isConnected"></image>
				<image class="btn-image" mode="widthFix" src="/static/images/connect-ble-hl.png" @click="connectBLE" v-else></image>
			</view>
			<view class="button">
				<image class="btn-image" mode="widthFix" src="/static/images/disconnect-ble.png" v-if="!isConnected"></image>
				<image class="btn-image" mode="widthFix" src="/static/images/disconnect-ble-hl.png" @click="disconnectDevice" v-else></image>
			</view>
			<view class="button">
				<image class="btn-image" mode="widthFix" src="/static/images/scan.png" v-if="isConnected || deviceIdList.length === 0"></image>
				<image class="btn-image" mode="widthFix" src="/static/images/scan-hl.png" @click="scanCode" v-else></image>
			</view>
			<view class="button">
				<image class="btn-image" mode="widthFix" src="/static/images/use-records-hl.png" @click="useRecords"></image>
				<!-- <image class="btn-image" mode="widthFix" src="/static/images/use-records.png" v-else></image> -->
			</view>
			<view class="button">
				<image class="btn-image" mode="widthFix" src="/static/images/find_device_hl.png" v-if="!isConnected" @click="findDevice"></image>
				<image class="btn-image" mode="widthFix" src="/static/images/find_device.png" v-else></image>
			</view>
		</view>
		<Back style="margin-top: 100rpx;" />
	</view>
</template>

<style lang="scss">
	image {
		will-change: transform;
		width: auto;
		height: auto
	}

	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		:deep(.wd-picker__cell) {
			padding: 20rpx 10rpx !important;
			font-size: 32rpx !important;
			background-color: transparent !important;
		}
	}

	.bg {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -10;
		/* 置于底层 */
	}

	.content {
		width: 100%;
		margin-top: 40rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.select-border {
		width: 670rpx;
		margin-bottom: 50rpx;
		border-bottom: 1px solid #929292;
	}

	.select-ble {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 670rpx;
		margin-bottom: 50rpx;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #929292;

		.ble-name {}

		.placeholder {
			font-size: 24rpx;
			color: #a9a9a9;
		}

		.right {
			width: 40rpx;
		}
	}

	.button {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 50rpx;

		.btn-image {
			width: 670rpx;
		}
	}
</style>